<script lang="ts" setup>
import xlkTabBar from "../components/tab-bar.vue"

const tabCategories = [
    { key: 1, title: '电子产品' },
    { key: 2, title: '家居用品' },
    { key: 3, title: '服装鞋帽' },
    { key: 4, title: '美妆个护' },
    { key: 5, title: '食品饮料' },
    { key: 6, title: '图书文具' },
    { key: 7, title: '运动户外' },
    { key: 8, title: '母婴用品' },
    { key: 9, title: '汽车配件' },
    { key: 10, title: '数码配件' }
]
</script>

<template>
    <umrp-page bg-color="linear-gradient(to bottom, #1890ff30 0% , #1890ff10 20%, #1890ff10 20%,#fff 100%)">
        <umrp-title-bar>
            <umrp-text bold>商品分类</umrp-text>
        </umrp-title-bar>
        <umrp-container padding="10px" :gap="10">
            <umrp-input-search></umrp-input-search>
        </umrp-container>
        <umrp-row :gutter="10">
            <umrp-col :span="7">
                <umrp-container bg-color="#fff">
                    <umrp-tabs direction="vertical">
                        <umrp-tab-panel v-for="tab in tabCategories" :key="tab.key" :title="tab.title" />
                    </umrp-tabs>
                </umrp-container>
            </umrp-col>
            <umrp-col :span="17">
                <umrp-container :gap="10">
                    <umrp-media v-for="_ in 6">
                        <umrp-container justify="between" height="100%" width="100%">
                            <umrp-text>商品名称</umrp-text>
                            <umrp-text color="red">￥99</umrp-text>
                            <umrp-text color="red">到手价：￥66</umrp-text>
                            <umrp-container direction="horizonal" justify="between" align="center" width="100%">
                                <umrp-text color="secondary" :size="12">已售卖443123+件</umrp-text>
                                <umrp-button type="primary" shape="circle">抢</umrp-button>
                            </umrp-container>
                        </umrp-container>
                    </umrp-media>
                </umrp-container>
            </umrp-col>
        </umrp-row>
        <xlk-tab-bar />
    </umrp-page>
</template>